<template>
  <div id="app">
    <div class="box">
      <ul>
        <li class="active">管理中心</li>
        <li>商品管理</li>
        <li>会员管理</li>
        <li>订单管理</li>
      </ul>
    </div>
    <div class="right">
      <v-header></v-header>
      <div class="main">
        <h2>会员管理</h2>
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>电影名称</th>
              <th>价格</th>
              <th>上映时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in arr" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.price | price }}</td>
              <td>{{ item.time | localTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <v-footer></v-footer>
    </div>
  </div>
</template>

<script>
import vHeader from "./components/vHeader.vue";
import vFooter from "./components/vFooter.vue";

export default {
  name: "App",
  data() {
    return {
      arr: [
        {
          id: 1,
          name: "姜子牙",
          price: 30.0,
          time: 1607928388132,
        },
        {
          id: 2,
          name: "我和我的祖国",
          price: 45.0,
          time: 1307928388132,
        },
        {
          id: 3,
          name: "我和我的家乡",
          price: 32.1,
          time: 1407928388132,
        },
      ],
    };
  },
  filters: {
    localTime(t) {
      let d = new Date(t);
      let year = d.getFullYear();
      let month = (d.getMonth() + 1 + "").padStart(2, "0"); 
      let date = (d.getDate() + "").padStart(2, "0");
      let hours = (d.getHours() + "").padStart(2, "0");
      let minutes = (d.getMinutes() + "").padStart(2, "0");
      let seconds = (d.getSeconds() + "").padStart(2, "0");
      return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    },
  },
  components: {
    vHeader,vFooter
  },
};
</script>

<style>
.main {
  height: 550px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  border-left: 10px solid #ccc;
  border-top: 10px solid #ccc;
  border-bottom: 10px solid #ccc;
}
table {
  margin: 50px auto;
  width: 600px;
  border-collapse: collapse;
}
#app {
  display: flex;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
body,
html {
  width: 100%;
  height: 100%;
}
.box {
  width: 200px;
  background-color: rgb(7, 1, 87);
  color: #fff;
  height: 100%;
  overflow: hidden;
}
.active{
  background-color: rgb(8, 100, 240);
}
ul {
  margin-top: 50px;
  text-align: center;
}
ul li {
  height: 60px;
  line-height: 60px;
}
.right {
  height: 100%;
  width: calc(100% - 200px);
}
h2 {
  text-align: center;
}
</style>


